import React, { useEffect } from 'react';
import { useFitness } from '../../contexts/FitnessContext';
const FormItem: React.FC = () => {
    const { fitnessData, onDelete, onEdit, onScores, isLoading, setIsLoading } = useFitness()
    useEffect(() => {
        if (fitnessData && fitnessData.length > 0) {
            setIsLoading(false);
        }
    }, []);
    // 在组件挂载时计算成绩
    useEffect(() => {
        onScores(); // 调用计算成绩的函数
    }, [onScores]); // 确保 onScores 在依赖数组中
    return (
        <div className="bg-white rounded-lg shadow overflow-hidden p-6 mb-4 md:h-full" >
            <h3 className="text-xl font-semibold text-gray-700 mb-4 border-b border-gray-200 pb-2">
                成绩记录
                <div className="flex items-center mt-2">
                </div>
            </h3>
            {isLoading ? (
                <div className="flex justify-center items-center h-32">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
                </div>
            ) : fitnessData.length === 0 ? (
                <div className="text-center py-8 text-gray-500">暂无数据</div>
            ) : (
                <table className="w-full text-sm text-left text-gray-500">
                    <thead className="text-xs uppercase bg-gray-700 text-white">
                        <tr className='bg-blue-500 text-white'>
                            <th className="px-4 py-3">身高</th>
                            <th className="px-4 py-3">体重</th>
                            <th className="px-4 py-3">肺活量</th>
                            <th className="px-4 py-3">跑步时间</th>
                            <th className="px-4 py-3">成绩</th>
                            <th className="px-4 py-3">操作</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-600 ">
                        {fitnessData?.map((data) => (
                            <tr key={data.id} className='md:h-full'>
                                <td className="px-4 py-3 whitespace-nowrap">
                                    <input
                                        type="number"
                                        value={data.height}
                                        onChange={(e) => onEdit(data.id, 'height', parseFloat(e.target.value))}
                                        onBlur={() => onScores(data.id)} // 添加这行
                                        className="w-full px-2 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    />
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap">
                                    <input
                                        type="number"
                                        value={data.weight}
                                        onChange={(e) => onEdit(data.id, 'weight', parseFloat(e.target.value))}
                                        onBlur={() => onScores(data.id)}
                                        className="w-full px-2 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    />
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap">
                                    <input
                                        type="number"
                                        value={data.lungs_capacity}
                                        onBlur={() => onScores(data.id)}
                                        onChange={(e) => onEdit(data.id, 'lungs_capacity', parseFloat(e.target.value))}
                                        className="w-full px-2 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    />
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap">
                                    <input
                                        type="number"
                                        value={data.running_time}
                                        onBlur={() => onScores(data.id)}
                                        onChange={(e) => onEdit(data.id, 'running_time', parseFloat(e.target.value))}
                                        className="w-full px-2 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    />
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap">
                                    <input
                                        type="number"
                                        value={data.score}
                                        onChange={(e) => onEdit(data.id, 'score', parseFloat(e.target.value))}
                                        className="w-full px-2 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    />
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap">
                                    <button
                                        onClick={() => onDelete(data.id)}
                                        className="text-red-600 hover:text-red-900 transition-colors duration-200"
                                    >
                                        删除
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            )}
        </div>
    );
};

export default FormItem;